<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <title>Simplemde Editor</title>
    <link type="text/css" href="css/simplemde.min.css" rel="stylesheet" />
    <link type="text/css" href="css/markdown-light.css" rel="stylesheet" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #simplemde-editor-container {
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div id="simplemde-editor-container">
        <textarea id="editor_area" name="content" style="display: none;"></textarea>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/simplemde.min.js"></script>
    <script>
        // Simplemde editor
        var simpleMDEditor;
        $(function(){
            var $editArea = $('#editor_area');
            initSimplemdeEditor($editArea);
        }) 
        function initSimplemdeEditor($editArea){
            simpleMDEditor = new SimpleMDE({
                autoDownloadFontAwesome: true,
                element: $editArea[0],
                forceSync: true,
                renderingConfig: {
                    singleLineBreaks: false
                },
                indentWithTabs: false,
                tabSize: 4,
                spellChecker: false,
                placeholder: '请使用 Markdown 格式书写 ;-)',
                previewRender: function(plainText, preview) {
                    setTimeout(function(){
                        preview.innerHTML = customMarkdownParser(plainText);
                    }, 250);

                    return "Loading...";
                },
                toolbar: [
                    "bold",
                    "italic",
                    "strikethrough",
                    "|",
                    "heading-1",
                    "heading-2",
                    "heading-3",
                    "heading-bigger",
                    "heading-smaller",
                    "|",
                    "code",
                    "quote",
                    "|",
                    "unordered-list",
                    "ordered-list",
                    "|",
                    "link",
                    "image",
                    "table",
                    "horizontal-rule",
                    "|",
                    "clean-block"
                ]
            });
            return true;
        }
    </script>
  </body>
</html>
